<template>
    <a-modal
        v-model:visible="showModal"
        :title="title"
        :width="480"
        :destroyOnClose="true"
        :maskClosable="false"
        :confirmLoading="loading"
        class="bindingModal"
        @cancel="handleCancle"
        @ok="onSubmit"
    >
        <div class="binding-body">
            <a-form :label-col="labelCol" :wrapper-col="wrapperCol" :model="formState" :rules="rules" ref="formRef">
                <a-form-item :label="t('yl.bindingskuSpecsName')" name="skuSpecsId">
                    <a-select v-model:value="formState.skuSpecsId" @change="handSkuSpecsName">
                        <a-select-option :value="item.id" v-for="(item, index) in goodsSkuList" :key="index">{{
                            item.specsName
                        }}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :label="t('yl.bindingMerchanTitle')" name="goodsId">
                    <a-select v-model:value="formState.goodsId" @change="handGooId">
                        <a-select-option :value="good.id" v-for="(good, goodIndex) in skuGoodsSkuList" :key="goodIndex">{{
                            good.name
                        }}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :label="t('yl.bindingStripCode')" name="skuCode">
                    <a-input v-model:value="formState.skuCode" disabled :placeholder="t('yl.bindingStripCode')" />
                </a-form-item>
            </a-form>
        </div>
    </a-modal>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref, watch, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import _ from 'lodash';

import { getAppsTemplate, postAppsActivation } from '@/api/device/deviceApps';
import { getCetegory, getskuGoodsSku } from '@/api/goods';
import { PaginationQuery, Pagination } from '@/types/table';

// 表单校验规则
const initRules = (t: fn) => {
    return {
        skuSpecsId: [{ required: true, message: t('yl.inputNameStand'), type: 'number', trigger: 'blur' }],
        goodsId: [{ required: true, message: t('yl.bindingMerchanTitle'), type: 'number', trigger: 'blur' }],
    };
};

export default defineComponent({
    name: 'roleModel',
    components: {},
    props: {
        visible: {
            type: Boolean,
            default: () => false,
        },
        title: {
            type: String,
        },
        selectEditModel: {
            type: Array,
            default: () => [],
        },
        loading: {
            type: Boolean,
            default: () => false,
        },
        dept: {
            type: Object,
        },
    },
    emits: ['submit', 'cancle'],
    setup(props, { emit }) {
        const { t } = useI18n();
        // const a = reactive({
        //     showModal: computed(() => props.visible),
        //     models: computed(() => props.selectModels as NormalObj[]),
        // })
        const showModal = computed(() => props.visible);

        const formState = reactive({
            skuSpecsName: '',
            skuSpecsId: null,
            goodsId: '',
            name: '',
            skuCode: '',
        });
        const tableQuery: PaginationQuery = reactive({
            page: 0,
            size: 10,
            sort: 'id,desc',
            blurry: '',
        });

        const goodsSkuList: any = ref([]);

        const skuGoodsSkuList = ref([]);
        // 表单校验
        const rules = initRules(t);
        const formRef = ref();
        // 提交
        onMounted(async () => {
            getCetegoryData();
        });
        // 取消
        const handleCancle = () => {
            return emit('cancle');
        };

        // 获取表格数据

        // 获取table数据
        const getCetegoryData = async () => {
            const { content, totalElements } = await getCetegory(tableQuery);
            goodsSkuList.value = content;
        };

        const getskuGoodsSkuList = async (params: PaginationQuery) => {
            const { content, totalElements } = await getskuGoodsSku(params);
            skuGoodsSkuList.value = content;
        };
        const onSubmit = () => {
            formRef.value.validate().then(() => {
                console.log(formState);
                return emit('submit', formState);
            });
        };
        const handSkuSpecsName = (val: any) => {
            formState.goodsId = '';
            formState.name = '';
            formState.skuCode = '';
            for (let i = 0; i < goodsSkuList.value.length; i++) {
                if (goodsSkuList.value[i].id == val) {
                    formState.skuSpecsName = goodsSkuList.value[i].specsName;
                }
            }

            getskuGoodsSkuList({
                page: 0,
                size: 9990,
                sort: 'id,desc',
                skuSpecsId: val,
            });
        };
        const handGooId = (val: any) => {
            console.log(val);
            for (let i = 0; i < skuGoodsSkuList.value.length; i++) {
                if (skuGoodsSkuList.value[i].id == val) {
                    formState.name = skuGoodsSkuList.value[i].name;
                    formState.skuCode = skuGoodsSkuList.value[i].skuCode;
                }
            }
        };
        const handleCancel = () => {
            return emit('cancle');
        };
        return {
            formRef,
            labelCol: { span: 5 },
            wrapperCol: { span: 17 },
            showModal,
            formState,
            t,
            rules,
            handleCancle,
            skuGoodsSkuList,
            onSubmit,
            getCetegoryData,
            tableQuery,
            goodsSkuList,
            handSkuSpecsName,
            getskuGoodsSkuList,
            handleCancel,
            handGooId,
        };
    },
});
</script>
<style lang="scss">
.bindingModal .ant-modal-body {
    padding: 0;
}
.binding-body {
    padding: 24px;
}
</style>
